<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="col-lg-4">
    <div class="card-profile mb-4 card">
        <div class="overflow-hidden card-header"
             style="background-image: url(&quot;https://bubbly-react.vercel.app/img/photos/paul-morris-116514-unsplash.jpg&quot;);"></div>
        <div class="text-center card-body">
            <div class="card-profile-img mx-auto d-flex align-center" style="max-height: 8rem;">
                <div class="position-relative overflow-hidden rounded-circle">
                    <div style="overflow: hidden; box-sizing: border-box; display: inline-block; position: relative; width: 122px; height: 122px;">
                        <img alt="Nathan Andrews"
                             srcset="/_next/image?url=%2Fimg%2Favatar-7.jpg&amp;w=128&amp;q=75 1x, /_next/image?url=%2Fimg%2Favatar-7.jpg&amp;w=256&amp;q=75 2x"
                             src="/_next/image?url=%2Fimg%2Favatar-7.jpg&amp;w=256&amp;q=75" decoding="async"
                             style="position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;">
                    </div>
                </div>
            </div>
            <h3 class="mb-3">Nathan Andrews</h3>
            <p class="mb-4">One morning, when Gregor Samsa woke from troubled</p>
            <button type="button" class="btn btn-outline-dark btn-sm">
                <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter"
                     class="svg-inline--fa fa-twitter fa-w-16 " role="img" xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 512 512">
                    <path fill="currentColor"
                          d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
                </svg>
                Follow
            </button>
        </div>
    </div>
    <div class="mb-4 card">
        <div class="card-body">
            <div class="d-flex align-items-center">
                <div class="flex-shrink-0">
                    <div class="avatar avatar-lg  ">
                        <div class="position-relative overflow-hidden rounded-circle h-100 d-flex align-items-center justify-content-center">
                            <div style="overflow: hidden; box-sizing: border-box; display: inline-block; position: relative; width: 72px; height: 72px;">
                                <img alt="Nathan Andrews"
                                     srcset="/_next/image?url=%2Fimg%2Favatar-7.jpg&amp;w=96&amp;q=75 1x, /_next/image?url=%2Fimg%2Favatar-7.jpg&amp;w=256&amp;q=75 2x"
                                     src="/_next/image?url=%2Fimg%2Favatar-7.jpg&amp;w=256&amp;q=75" decoding="async"
                                     class="rounded-circle"
                                     style="position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex-grow-1 ps-3"><h4>Nathan Andrews</h4>
                    <p class="text-muted mb-0">Coder</p>
                    <ul class="social-links list-inline mb-0 mt-2">
                        <li class="list-inline-item"><a href="#">
                            <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook"
                                 class="svg-inline--fa fa-facebook fa-w-16 " role="img"
                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                <path fill="currentColor"
                                      d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path>
                            </svg>
                        </a></li>
                        <li class="list-inline-item"><a href="#">
                            <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter"
                                 class="svg-inline--fa fa-twitter fa-w-16 " role="img"
                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                <path fill="currentColor"
                                      d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
                            </svg>
                        </a></li>
                        <li class="list-inline-item"><a href="#">
                            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="phone"
                                 class="svg-inline--fa fa-phone fa-w-16 " role="img" xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 512 512">
                                <path fill="currentColor"
                                      d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"></path>
                            </svg>
                        </a></li>
                        <li class="list-inline-item"><a href="#">
                            <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="skype"
                                 class="svg-inline--fa fa-skype fa-w-14 " role="img" xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 448 512">
                                <path fill="currentColor"
                                      d="M424.7 299.8c2.9-14 4.7-28.9 4.7-43.8 0-113.5-91.9-205.3-205.3-205.3-14.9 0-29.7 1.7-43.8 4.7C161.3 40.7 137.7 32 112 32 50.2 32 0 82.2 0 144c0 25.7 8.7 49.3 23.3 68.2-2.9 14-4.7 28.9-4.7 43.8 0 113.5 91.9 205.3 205.3 205.3 14.9 0 29.7-1.7 43.8-4.7 19 14.6 42.6 23.3 68.2 23.3 61.8 0 112-50.2 112-112 .1-25.6-8.6-49.2-23.2-68.1zm-194.6 91.5c-65.6 0-120.5-29.2-120.5-65 0-16 9-30.6 29.5-30.6 31.2 0 34.1 44.9 88.1 44.9 25.7 0 42.3-11.4 42.3-26.3 0-18.7-16-21.6-42-28-62.5-15.4-117.8-22-117.8-87.2 0-59.2 58.6-81.1 109.1-81.1 55.1 0 110.8 21.9 110.8 55.4 0 16.9-11.4 31.8-30.3 31.8-28.3 0-29.2-33.5-75-33.5-25.7 0-42 7-42 22.5 0 19.8 20.8 21.8 69.1 33 41.4 9.3 90.7 26.8 90.7 77.6 0 59.1-57.1 86.5-112 86.5z"></path>
                            </svg>
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="mb-4 card">
        <form class="">
            <div class="card-header"><h4 class="card-heading">My Profile</h4></div>
            <div class="card-body">
                <div class="mb-3 row">
                    <div class="d-flex align-items-center col-auto">
                        <div class="avatar avatar-lg  ">
                            <div class="position-relative overflow-hidden rounded-circle h-100 d-flex align-items-center justify-content-center">
                                <div style="overflow: hidden; box-sizing: border-box; display: inline-block; position: relative; width: 72px; height: 72px;">
                                    <img alt="Nathan Andrews"
                                         src="/_next/image?url=%2Fimg%2Favatar-7.jpg&amp;w=256&amp;q=75"
                                         decoding="async" class="rounded-circle"
                                         srcset="/_next/image?url=%2Fimg%2Favatar-7.jpg&amp;w=96&amp;q=75 1x, /_next/image?url=%2Fimg%2Favatar-7.jpg&amp;w=256&amp;q=75 2x"
                                         style="position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col"><label class="form-label">Name</label><input placeholder="Your name" type="text"
                                                                                  class="form-control"></div>
                </div>
                <div class="mb-3"><label class="form-label">Bio</label><textarea rows="8" class="form-control">The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought. It wasn't a dream.</textarea>
                </div>
                <div class="mb-3"><label class="form-label">Email</label><input placeholder="you@domain.com" type="text"
                                                                                class="form-control"></div>
                <label class="form-label">Password</label><input placeholder="you@domain.com" type="password"
                                                                 class="form-control" value="password"></div>
            <div class="text-end card-footer">
                <button type="button" class="btn btn-primary">Save</button>
            </div>
        </form>
    </div>
</div>
</body>
</html>